﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Interface/HtmlTable</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#HtmlTable">HtmlTable</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#HtmlTable:push">push</a></div>
			<div class="menu-item"><a href="#HtmlTable:push">push</a></div>
			<div class="menu-item"><a href="#HtmlTable:pushMany">pushMany</a></div>
			<div class="menu-item"><a href="#HtmlTable:empty">empty</a></div>
			<div class="menu-item"><a href="#HtmlTable:set">set</a></div>
			<div class="menu-item"><a href="#HtmlTable:toElement">toElement</a></div>
			<div class="menu-item"><a href="#HtmlTable:Element-Methods">Element.Methods</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:HtmlTable">HtmlTable</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="HtmlTable"><a href="#HtmlTable">Class: HtmlTable</a></h1>

<p class="description">Builds table elements with methods to add rows quickly.</p>

<h3>Tutorial/Demo</h3>

<ul>
<li><a href="http://www.clientcide.com/wiki/cnet-libraries/08-layout/00-htmltable">Online Tutorial/Demo</a></li>
</ul>
<h3>Implements</h3>

<ul>
<li>
<a href="../../core/Class/Class.Extras.html#Options">Options</a>, <a href="../../core/Class/Class.Extras.html#Events">Events</a>, <a href="../Class/Class.Occlude.html">Class.Occlude</a>
</li>
</ul>
<h2><a href="#">HtmlTable Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">[</span>table, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>table - (<em>mixed</em>; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.</li>
<li>options - (<em>object</em>; optional) a key/value set of options.</li>
</ol>
<h3>Options</h3>

<ul>
<li>properties - (<em>object</em>) a set of properties for the Table element; defaults to <em>{cellpadding:0, cellspacing:0, border:0}</em>
</li>
<li>rows - (<em>array</em>) an array of row objects (see <a href="#HtmlTable:push">HtmlTable.push</a>)</li>
<li>headers - (<em>array</em>) a row that is injected in the <em>thead</em>; required for sorting.</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">var</span> myTable = <span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">{</span>
    properties: <span class="br0">{</span>
        border: <span class="nu0">1</span>,
        cellspacing: <span class="nu0">3</span>
    <span class="br0">}</span>,
    headers: <span class="br0">[</span><span class="st0">'fruits'</span>, <span class="st0">'colors'</span><span class="br0">]</span>,
    rows: <span class="br0">[</span>
        <span class="br0">[</span><span class="st0">'apple'</span>, <span class="st0">'red'</span><span class="br0">]</span>,
        <span class="br0">[</span><span class="st0">'lemon'</span>, <span class="st0">'yellow'</span><span class="br0">]</span>
    <span class="br0">]</span>
<span class="br0">}</span><span class="br0">)</span>;
myTable.<span class="me1">inject</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'someContainer'</span><span class="br0">)</span><span class="br0">)</span>;
&nbsp;
<span class="co1">//ALSO</span>
&nbsp;
<span class="kw2">var</span> myTable = <span class="kw2">new</span> HtmlTable<span class="br0">(</span>$<span class="br0">(</span><span class="st0">'existingTable'</span><span class="br0">)</span><span class="br0">)</span>;
myTable.<span class="me1">push</span><span class="br0">(</span><span class="br0">[</span><span class="st0">'data'</span>,<span class="st0">'goes'</span>,<span class="st0">'here'</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h2 id="HtmlTable:push"><a href="#HtmlTable:push">HtmlTable Method: push</a></h2>

<p class="description">Inserts a new table row. To push several at once, see (see <a href="#HtmlTable:pushMany">HtmlTable.pushMany</a>)</p>

<h3>Syntax</h3>

<pre class="javascript">myHtmlTable.<span class="me1">push</span><span class="br0">(</span>row, rowProperties, target, tag, where<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>row - (<em>array</em> or <em>element</em>) the data for the row or <em>TR</em> element.</li>
<li>rowProperties - (<em>object</em>; optional) the properties for the row (class, id, styles, etc)</li>
<li>target - (<em>element</em>; optional) The element that the row is injected into, before, after, etc. Defaults to the table body.</li>
<li>tag - (<em>string</em>; optional) The type of element to create (<code>td</code> or <code>th</code>); defaults to <code>td</code>.</li>
<li>where - (<em>string</em>; optional) the argument passed to <code>Element.inject</code> that specifies where the row is inserted relative to the specified target (<code>before</code>, <code>after</code>, <code>top</code>, <code>bottom</code>, etc)</li>
</ol>
<h3>Row data</h3>

<p>Row data can be in either of two formats. Note that they can be mixed and matched.</p>

<ul>
<li>simple - (<em>array</em>) an array of strings, elements and element collections that will be inserted into each table data</li>
</ul>
<p><strong>OR</strong></p>

<ul>
<li>detailed - (<em>array</em>) an array of objects with definitions for content and properties for each table data</li>
</ul>
<p>Note that it can also be an actual <em>TR</em> element.</p>

<h3>Examples</h3>

<pre class="javascript"><span class="co1">//example of 'simple' rows</span>
myTable.<span class="me1">push</span><span class="br0">(</span><span class="br0">[</span><span class="st0">'value 1'</span>, <span class="st0">'value 2'</span>, <span class="st0">'value 3'</span><span class="br0">]</span>, <span class="br0">{</span>
    <span class="st0">'class'</span>: <span class="st0">'tableRowClass'</span>
<span class="br0">}</span><span class="br0">)</span>; <span class="co1">//new row</span>
&nbsp;
&nbsp;
<span class="co1">//detailed rows</span>
myTable.<span class="me1">push</span><span class="br0">(</span><span class="br0">[</span>
    <span class="br0">{</span> <span class="co1">//can specify data AND properties</span>
        content: <span class="st0">'value 4'</span>,
        properties: <span class="br0">{</span>
            colspan: <span class="nu0">2</span>,
            <span class="st0">'class'</span>: <span class="st0">'doubleWide'</span>,
            style: <span class="st0">'1px solid blue'</span>
        <span class="br0">}</span>
    <span class="br0">}</span>,
    <span class="st0">'value 5'</span> <span class="co1">//can just be data; mixing and the two in the same row is fine</span>
<span class="br0">]</span><span class="br0">)</span>;
&nbsp;
&nbsp;
<span class="co1">//RESULT:</span>
&lt;table cellpadding=<span class="st0">"0"</span> cellspacing=<span class="st0">"0"</span> border=<span class="st0">"0"</span>&gt;
    &lt;tr <span class="kw2">class</span>=<span class="st0">"tableRowClass"</span>&gt;
        &lt;td&gt;value <span class="nu0">1</span>&lt;/td&gt;
        &lt;td&gt;value <span class="nu0">2</span>&lt;/td&gt;
        &lt;td&gt;value <span class="nu0">3</span>&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan=<span class="st0">"2"</span> <span class="kw2">class</span>=<span class="st0">"doubleWide"</span> style=<span class="st0">"1px solid blue"</span>&gt;value <span class="nu0">4</span>&lt;/td&gt;
        &lt;td&gt;value <span class="nu0">5</span>&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) an object containing the tr and td tags.</li>
</ul>
<h3>Example of Object Returned</h3>

<pre class="javascript"><span class="br0">{</span>tr: theTableRow, tds: <span class="br0">[</span>td, td, td<span class="br0">]</span><span class="br0">}</span>
</pre>

<h2 id="HtmlTable:push"><a href="#HtmlTable:push">HtmlTable Method: update</a></h2>

<p class="description">Update a table row</p>

<h3>Syntax</h3>

<pre class="javascript">myHtmlTable.<span class="me1">update</span><span class="br0">(</span>tr, row<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>tr - (<em>TR</em> element) the row to update</li>
<li>row - (<em>array</em> or <em>element</em>) the data for the row or <em>TR</em> element. Same as the row data sent to <a href="#HtmlTable:push">HtmlTable.push</a>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) an object containing the tr and td tags.</li>
</ul>
<h2 id="HtmlTable:pushMany"><a href="#HtmlTable:pushMany">HtmlTable Method: pushMany</a></h2>

<p class="description">Inserts a group of rows into the table.</p>

<h3>Syntax</h3>

<pre class="javascript">myHtmlTable.<span class="me1">push</span><span class="br0">(</span>rows, rowProperties, target, tag, where<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>rows - (<em>array</em>) An array of row data objects (see <a href="#HtmlTable:push">HtmlTable.push</a>)</li>
<li>rowProperties - (<em>object</em>; optional) the properties for the row (class, id, styles, etc)</li>
<li>target - (<em>element</em>; optional) The element that the row is injected into, before, after, etc. Defaults to the table body.</li>
<li>tag - (<em>string</em>; optional) The type of element to create (<code>td</code> or <code>th</code>); defaults to <code>td</code>.</li>
<li>where - (<em>string</em>; optional) the argument passed to <code>Element.inject</code> that specifies where the row is inserted relative to the specified target (<code>before</code>, <code>after</code>, <code>top</code>, <code>bottom</code>, etc)</li>
</ol>
<h3>Example</h3>

<pre class="javascript"><span class="co1">//example of 'simple' rows</span>
myTable.<span class="me1">push</span><span class="br0">(</span><span class="br0">[</span>
        <span class="br0">[</span><span class="nu0">1</span>, <span class="st0">'one'</span><span class="br0">]</span>,
        <span class="br0">[</span><span class="nu0">2</span>, <span class="st0">'two'</span><span class="br0">]</span>,
        <span class="br0">[</span><span class="nu0">3</span>, <span class="st0">'three'</span><span class="br0">]</span>
    <span class="br0">]</span>, <span class="br0">{</span>
    <span class="st0">'class'</span>: <span class="st0">'tableRowClass'</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<p>The above example would produce a table with 3 rows each with the class <code>tableRowClass</code>.</p>

<h3>Returns</h3>

<ul>
<li>(<em>array</em>) An array of row results returned by <a href="#HtmlTable:push">HtmlTable.push</a>.</li>
</ul>
<h2 id="HtmlTable:empty"><a href="#HtmlTable:empty">HtmlTable method: empty</a></h2>

<p class="description">Empties the <em>tbody</em> of the table.</p>

<h3>Syntax</h3>

<pre class="javascript">myTable.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of HtmlTable.</li>
</ul>
<h2 id="HtmlTable:set"><a href="#HtmlTable:set">HtmlTable method: set</a></h2>

<p class="description">Sets the contents of the header or footer.</p>

<h3>Syntax</h3>

<pre class="javascript">myTable.<span class="me1">set</span><span class="br0">(</span>what, rowArray<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>what - (<em>string</em>) either 'headers' or 'footers'</li>
<li>rowArray - (<em>array</em>) an array of header information; same as the row data sent to <a href="#HtmlTable:push">HtmlTable.push</a>
</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) The row data (same as returned by the <em>push</em> method).</li>
</ul>
<h2 id="HtmlTable:toElement"><a href="#HtmlTable:toElement">HtmlTable method: toElement</a></h2>

<p class="description">If you pass an instance of HtmlTable into the <code>$</code> or <code>document.id</code> function
it will return the actual table Element.</p>

<h3>Examples</h3>

<pre class="javascript">document.<span class="me1">id</span><span class="br0">(</span>myHtmlTable<span class="br0">)</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'color'</span>, <span class="st0">'blue'</span><span class="br0">)</span>;
&nbsp;
$<span class="br0">(</span>myHtmlTable<span class="br0">)</span> == myHtmlTable.<span class="me1">table</span>; <span class="co1">// true</span>
</pre>

<h2 id="HtmlTable:Element-Methods"><a href="#HtmlTable:Element-Methods">HtmlTable methods: Element methods</a></h2>

<p class="description">This class implements the following <a href="../../core/Element/Element.html">Element</a> methods:</p>

<ul>
<li>adopt</li>
<li>inject</li>
<li>wraps</li>
<li>grab</li>
<li>replaces</li>
<li>empty</li>
<li>dispose</li>
</ul>
<p>These will execute these methods on the table element.</p>

<h3>Arguments</h3>

<p>Each method accepts exactly the same arguments as the <a href="../../core/Element/Element.html">Element</a> equivalent.</p>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of HtmlTable.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">myHtmlTable.<span class="me1">inject</span><span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>;
<span class="co1">//same as:</span>
document.<span class="me1">id</span><span class="br0">(</span>myHtmlTable<span class="br0">)</span>.<span class="me1">inject</span><span class="br0">(</span>document.<span class="me1">body</span><span class="br0">)</span>;
</pre>

<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Extends the Element Type with a reference to its <a href="#HtmlTable">HtmlTable</a> instance.</p>

<h2 id="Element:HtmlTable"><a href="#Element:HtmlTable">Element property: HtmlTable</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript">myElement.<span class="me1">retrieve</span><span class="br0">(</span><span class="st0">'HtmlTable'</span><span class="br0">)</span>; <span class="co1">//the instance of HtmlTable for the element</span>
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
